iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 23
1
自我挑戰組

輕鬆Vue一下系列 第 23

Day23-v-charts/圓餅圖

  • 分享至 

  • xImage
  •  

圓餅圖

https://ithelp.ithome.com.tw/upload/images/20191006/20112076To9DJy4Q0k.jpg
在生成柱狀圖時,需要在html中建立一個ve-pie物件:
https://ithelp.ithome.com.tw/upload/images/20191006/201120769M7mwNHZkK.jpg
這裡將會介紹幾種簡單的設定:
1.它透過settings屬性將chartSettings變數綁定,設置餅圖半徑。radius就是用來控制圓餅圖的半徑的屬性,結果如下:
https://ithelp.ithome.com.tw/upload/images/20191006/20112076XZU6LBqB2G.jpg
https://ithelp.ithome.com.tw/upload/images/20191006/20112076JrjMHgR5EV.jpg
2.它透過settings屬性將chartSettings變數綁定,設置限制顯示的資料數目。而limitShowNum是用來控制欲顯示的資料數目,當資料量大於limitShowNum之值,則會被統一歸類為其他,結果如下:
https://ithelp.ithome.com.tw/upload/images/20191006/20112076w449lRP0k8.jpg
https://ithelp.ithome.com.tw/upload/images/20191006/2011207604zbWEDqgY.jpg
3.它透過settings屬性將chartSettings變數綁定,顯示多圓餅圖。這裡利用level來進行控制,結果如下:
https://ithelp.ithome.com.tw/upload/images/20191006/20112076tnWUSk6t7U.jpg
https://ithelp.ithome.com.tw/upload/images/20191006/20112076kF58ceoJhz.jpg
明日預告:v-charts/環狀圖


上一篇
Day22-v-charts/條形圖
下一篇
Day24-v-charts/環狀圖
系列文
輕鬆Vue一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言